<template>
  <div class="ms-login">
    <div class="ms-title">请填写如下信息</div>
    <el-form
      :model="param"
      :rules="rules"
      ref="login"
      label-width="0px"
      class="ms-content"
      >
      <el-form-item prop="学号">
        <el-input v-model="param.sno" placeholder="学号"> </el-input>
      </el-form-item>
      <el-form-item prop="姓名">
        <el-input v-model="param.name" placeholder="姓名"> </el-input>
      </el-form-item>
      <el-form-item prop="学院">
        <el-input v-model="param.academy" placeholder="学院"> </el-input>
      </el-form-item>
      <el-form-item prop="专业">
        <el-input v-model="param.major" placeholder="专业"> </el-input>
      </el-form-item>
      <el-form-item prop="班级">
        <el-input v-model="param.class" placeholder="班级"> </el-input>
      </el-form-item>
      <div class="ms-title">点击确认前请阅读弹出的mbti测试须知</div>
      <div class="login-btn">
          <el-tooltip placement="top">
          <template #content> MBTI测试前须知<br>
1、参加测试的人员请务必诚实、独立地回答问题，只有如此，才能得到有效的结果。 <br>
2、《性格分析报告》展示的是你的性格倾向，而不是你的知识、技能、经验。 <br>
3、MBTI提供的性格类型描述仅供测试者确定自己的性格类型之用，性格类型没有好坏，只有不同。每一种性格特征都有其价值和优点，也有缺点和需要注意的地方。
<br>
 清楚地了解自己的性格优劣势，有利于更好地发挥自己的特长，而尽可能的在为人处事中避免自己性格中的劣势，更好地和他人相处，更好地作重要的决策。<br> 
4、本测试分为四部分，共93题；需时约18分钟。所有题目没有对错之分，请根据自己的实际情况选择。 <br>
</template>
        <el-button type="primary" @click="submitForm">确认</el-button>
        </el-tooltip>
      </div>
    </el-form>
  </div>
</template>

<script>
export default {
  data() {
    return {
      param: {
        sno: "",
        name: "",
        academy: "",
        major: "",
        class: "",
      },
      rules: {
        学号: [{ required: true, message: "请输入学号", trigger: "blur" }],
        姓名: [{ required: true, message: "请输入姓名", trigger: "blur" }],
        学院: [{ required: true, message: "请输入学院", trigger: "blur" }],
        专业: [{ required: true, message: "请输入专业", trigger: "blur" }],
        班级: [{ required: true, message: "请输入班级", trigger: "blur" }]
      },
    };
  },
  methods: {
    submitForm() {
      this.$refs.login.validate((valid) => {
        if (valid) {
          this.$message.success("登录成功");
          console.log("true");
          this.$router.push("/home/MbtiTest");
        } else {
          console.log("false");
          alert("错误，请重新输入！");
        }
      });
    },
  },
};
</script>

<style scoped>
.ms-title {
  width: 100%;
  line-height: 50px;
  text-align: center;
  font-size: 15px;
  color: #23a3b7;
  border-bottom: 1px solid #fff;
}
.ms-login {
  position: absolute;
  left: 45%;
  top: 50%;
  width: 400px;
  padding: 40px;
  margin: -190px 0 0 -175px;
  border-radius: 5px;
  background: #e0f1fc;
  box-shadow: 0 15px 25px rgba(0, 0, 0, 0.4);
  overflow: hidden;
}
.ms-content {
  padding: 30px 30px;
}
.login-btn {
  text-align: center;
}
.login-btn button {
  width: 100%;
  height: 36px;
  margin-bottom: 10px;
}
</style>